<template>
	<view class="bg-color">
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="popups">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">共{{speakTotal}}条评论</text>
						<image @tap="close" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image>
					</view>
					<view class="popupTop">
						<view>
							<text style="color: #262626;font-size: 36rpx;font-weight: bold;">评论</text>
							<text
								style="color: #8C8C8C;font-size: 28rpx;margin-left: 16rpx;">(共{{speakAll.length}}条)</text>
						</view>
						<view>
							<text @tap="changeQueryType(index)" v-for="(item,index) in queryType"
								style="margin-right: 40rpx;" :key="index"
								:class="{beQueryType:queryTypeIndex==index}">{{item.name}}</text>
						</view>
					</view>
					<scroll-view scroll-y="true" class="speakAll" @scrolltolower="scrolltolowerOne">
						<view v-if="speakAll.length>0" v-for="(item,index) in speakAll" :key="index" class="speakBody">
							<view class="speakUserImg">
								<image class="speakUserImg"
									:src="item.avatar?`${httpUrl}/app/file/viewFile?fileId=${item.avatar}`:'../../static/img/userImg.png'">
								</image>
							</view>
							<view class="speakMian">
								<view class="speakName">{{item.userName}}</view>
								<view class="speakContent">{{item.commentsContent}}</view>
								<view class="speakInfo">
									<view>
										<text class="speakInfoText">{{item.intervalTime}}</text>
										<text class="speakInfoText"
											style="margin-left:8rpx;">{{item.commentsAddress}}</text>
										<text @tap="answer(item)" class="speakInfoTexts">回复</text>
									</view>
									<view class="imgWrap">
										<view class="imgWrap">
											<image @tap="toPraise(item)" v-if="item.flagLike=='LIKE'" class="img"
												src="../../static/img/dianzan.png">
											</image>
											<image @tap="toPraise(item)" v-else class="img"
												src="../../static/img/base-icon-like.png">
											</image>
											<text class="imgText">{{item.likeCount}}</text>
										</view>
										<view @tap="goReward('fu',item,index,0)" class="imgWrap">
											<image class="img" src="../../static/img/Frame 1321318967.png"></image>
											<text class="imgText">{{item.rewardNum}}</text>
										</view>
									</view>
								</view>
								<view v-if="item.expandFlag" v-for="(m,n) in item.queryTrendsCommentsReply" :key="n"
									class="speakBody">
									<view class="speakUserImg">
										<image class="speakUserImg"
											:src="m.avatar?`${httpUrl}/app/file/viewFile?fileId=${m.avatar}`:'../../static/img/userImg.png'">
										</image>
									</view>
									<view class="speakMian">
										<view class="speakName">{{m.userName}}</view>
										<view class="speakContent">{{m.commentsContent}}</view>
										<view class="speakInfo">
											<view>
												<text class="speakInfoText">{{m.intervalTime}}</text>
												<text class="speakInfoText"
													style="margin-left:8rpx;">{{m.commentsAddress}}</text>
											</view>
											<view class="imgWrap">
												<view class="imgWrap">
													<image @tap="toPraise(m)" v-if="m.flagLike=='LIKE'" class="img"
														src="../../static/img/dianzan.png">
													</image>
													<image @tap="toPraise(m)" v-else class="img"
														src="../../static/img/base-icon-like.png">
													</image>
													<text class="imgText">{{m.likeCount}}</text>
												</view>
												<view @tap="goReward('zi',m,index,n)" class="imgWrap">
													<image class="img" src="../../static/img/Frame 1321318967.png">
													</image>
													<text class="imgText">{{m.rewardNum}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="item.replyNum>0" class="toggleWrap">
									<view
										v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
										@tap="toOpen(item)" class="leftLine"></view>
									<text
										v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
										@tap="toOpen(item)"
										class="toggleText">展开{{item.pageNo>0&&item.expandFlag?'更多':item.replyNum+'条回复'}}</text>
									<image
										v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
										@tap="toOpen(item)" class="moreImg" src="../../static/img/zhankai.png"></image>
									<view v-if="item.expandFlag" @tap="item.expandFlag=false" class="closeWrap">
										<text class="toggleText">收起</text>
										<image class="moreImgs" src="../../static/img/zhankai.png"></image>
									</view>
								</view>
							</view>
						</view>
						<view v-else
							style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;">
							<text style="margin-top: 30rpx;">暂无评论</text>
						</view>
						<view v-if="isMore"
							style="width: 100%;height: 30rpx;display: flex;justify-content: center;margin-top: 10rpx;">
							<uni-load-more :status="moreText"></uni-load-more>
						</view>
					</scroll-view>
				</view>
				<view class="speakWrap1">
					<view class="speak1">
						<text @tap="querySpeak">发送</text>
						<!-- <image  @tap="querySpeak" class="speakImg1" mode="widthFix" src="../../static/img/bi.png"></image> -->
						<textarea v-model="speak" placeholder="说点什么吧～"
							placeholder-style="font-size:24rpx;color:#8C8C8C;margin-left:5rpx;"></textarea>
						<!-- 	<input style="width: 100%;" cursor-spacing="15" v-model="speak" placeholder="说点什么吧～"
							placeholder-style="font-size:28rpx;color:#8C8C8C;margin-left:5rpx;" confirm-type="send"
							@confirm="querySpeak" /> -->
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupInput" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="popups">
				<view class="speakWrap">
					<view class="speak">
						<image @tap="querySpeakTwo" class="speakImg" src="../../static/img/bi.png"></image>
						<input style="flex:1;margin-right: 20rpx;" cursor-spacing="15" focus v-model="speakTwo"
							:placeholder="placeholderUser"
							placeholder-style="font-size:28rpx;color:#8C8C8C;margin-left:5rpx;" confirm-type="send"
							@confirm="querySpeakTwo" />
						<text @click="querySpeakTwo">发送</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	import { queryMyTrendsComments, saveTrendsComments, saveTrendsCommentsPraise, queryMyTrendsReply, queryCommentsById } from '@/utils/api/index.ts'
	const httpUrl = ref(getApp().globalData.baseUrl)
	// 评论点赞
	const toPraise = async (item : any) => {
		const res = await saveTrendsCommentsPraise({ data: { trendsCommentsId: item.id } })
		if (res.code == 200) {
			item.flagLike = res.data.type
			item.likeCount = res.data.likeCount
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	}
	// 关闭评论返回
	const close = () => {
		uni.navigateBack({
			success: function () {
				uni.$emit('refreshData', { trendsId: trendsId.value, backIndex: backIndex.value });
			}
		})
	}

	// 显示/隐藏回复
	const toOpen = async (item : any) => {
		if (item.replyNum > item.queryTrendsCommentsReply.length) {
			item.pageNo++
			const data = {
				commentsId: item.id,
				pageNo: item.pageNo,
				pageSize: 10,
			}
			const res = await queryMyTrendsReply({ data: data })
			if (res.code == 200) {
				if (res.data.list.length > 0) {
					item.queryTrendsCommentsReply.push(...res.data.list)
				}
			}
		}
		item.expandFlag = true
	}
	// 一级评论
	const speak = ref('')
	const querySpeak = () => {
		const speaks = speak.value
		speak.value = ''
		const city = uni.getStorageSync('city')
		const data = {
			appTrendsComments: {
				trendsId: trendsId.value,
				commentsContent: speaks,
				commentsAddress: city
			}
		}
		const res = saveTrendsComments({ data: data })
			.then(res => {
				if (res.code == 200) {
					if (res.data.redAmount > 0) {
						uni.showToast({
							title: `评论成功！抢到${res.data.redAmount}个钻石红包`,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: `评论成功`,
							icon: 'none'
						});
					}
					pageNo.value = 1
					getList(trendsId.value)
				}
			})

	}
	// 打赏
	const goReward = (type : string, item : any, index : number, n : number) => {
		if (type == 'fu') {
			uni.navigateTo({
				url: `/pages/qiangqiang/reward?commentsId=${item.id}&id=${item.trendsId}&index=${index}`,
				animationType: 'slide-in-bottom',
				animationDuration: 250
			})
		} else {
			uni.navigateTo({
				url: `/pages/qiangqiang/reward?commentsId=${item.id}&id=${item.trendsId}&index=${index}&backIndexs=${n}`,
				animationType: 'slide-in-bottom',
				animationDuration: 250
			})
		}
	}
	const backList = async (datas : any) => {
		if (!datas.commentsId) {
			return
		}
		const res = await queryCommentsById({ data: { commentsId: datas.commentsId } })
		if (datas.backIndexs) {
			speakAll.value[datas.backIndex].queryTrendsCommentsReply[datas.backIndexs].rewardNum = res.data.rewardNum
		} else {
			speakAll.value[datas.backIndex] = res.data
		}

	}
	onShow(() => {
		uni.$once('refreshData', function (datas) {
			backList(datas)
		})
	})
	// 一级触底加载
	const isMore = ref(false)
	const moreText = ref('loading')
	const scrolltolowerOne = async () => {
		isMore.value = true
		pageNo.value = pageNo.value + 1
		const data = {
			trendsId: trendsId.value,
			commentsUserId: null,
			queryType: queryType.value[queryTypeIndex.value].key,
			pageNo: pageNo.value,
			pageSize: 10
		}
		const res = await queryMyTrendsComments({ data: data })
		if (res.code == 200) {
			speakTotal.value = res.data.total
			if (res.data.list.length > 0) {
				speakAll.value.push(...res.data.list)
				isMore.value = false
			} else {
				moreText.value = 'no-more'
			}
		}
	}
	// 二级回复
	const popupInput = ref<InstanceType<typeof Popup> | null>(null)
	const placeholderUser = ref('')
	const commentsId = ref(0)
	const answer = (item : any) => {
		placeholderUser.value = ` 回复 @${item.userName}`
		commentsId.value = item.id
		popupInput.value.open('bottom')
	}
	const speakTwo = ref('')
	const querySpeakTwo = async () => {
		const speaksTwo = speakTwo.value
		speakTwo.value = ''
		popupInput.value.close()
		const data = {
			appTrendsComments: {
				trendsId: trendsId.value,
				commentsContent: speaksTwo,
				commentsAddress:uni.getStorageSync('city'),
				commentsId: commentsId.value
			}
		}
		const res = await saveTrendsComments({ data: data })
		if (res.code == 200) {
			uni.showToast({
				title: '发送成功',
				icon: 'none'
			});
			pageNo.value = 1
			getList(trendsId.value)
		}
		return;
		setDialogView('ACCESS_FINE_LOCATION').then(res => {
			if (res == 1) {
				uni.getLocation({
					type: 'gcj02',
					geocode: 'true',
					success: async (e) => {
						const data = {
							appTrendsComments: {
								trendsId: trendsId.value,
								commentsContent: speaksTwo,
								commentsAddress:uni.getStorageSync('city'),
								commentsId: commentsId.value
							}
						}
						const res = await saveTrendsComments({ data: data })
						if (res.code == 200) {
							uni.showToast({
								title: '发送成功',
								icon: 'none'
							});
							pageNo.value = 1
							getList(trendsId.value)
						}
					}
				})
			}
		})

	}
	// 加载页面时获取数据
	const speakAll = ref<any>([])
	const speakTotal = ref(0)
	const queryType = ref<any>([{
		name: '热评',
		key: 'HEAT'
	}, {
		name: '最新',
		key: 'FRESH'
	}])
	const queryTypeIndex = ref(0)
	const changeQueryType = async (index : number) => {
		pageNo.value = 1
		queryTypeIndex.value = index
		getList(trendsId.value)
	}
	const pageNo = ref(1)
	const getList = async (id : string) => {
		const data = {
			trendsId: id,
			commentsUserId: null,
			queryType: queryType.value[queryTypeIndex.value].key,
			pageNo: pageNo.value,
			pageSize: 10
		}
		const res = await queryMyTrendsComments({ data: data })
		if (res.code == 200) {
			speakTotal.value = res.data.total
			speakAll.value = res.data.list
			uni.stopPullDownRefresh()
		}
	}
	const trendsId = ref('')
	const backIndex = ref(0)
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	onLoad(async (option) => {
		trendsId.value = option.id
		backIndex.value = option.index
		await getList(option.id)
		popup.value.open('bottom')
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		pageNo.value = 1
		getList(trendsId.value)
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: transparent;
	}

	.popups {
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: relative;
	}

	.speakWrap1 {
		padding: 0 3%;
	}

	.speak1 {
		display: flex;
		position: relative;
		align-items: flex-start;
	}

	.speak1 text {
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		background: #5c57c4;
		color: #fff;
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 8;
	}

	.speak1 textarea {
		flex: 1;
		background: #F5F5F5;
		border-radius: 32rpx;
		height: 200rpx;
		padding: 20rpx;
		font-size: 24rpx;
	}

	.popupMian {
		width: 94%;
		margin-left: 3%;
		position: relative;
	}

	.popupTitle {
		width: 100%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popupTop {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.beQueryType {
		color: #5c57c4;
		font-weight: bold;
	}

	.speakWrap {
		width: 100%;
		height: 98rpx;
		border-top: 2rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
	}

	.speak {
		width: 94%;
		height: 64rpx;
		margin-left: 3%;
		background: #F5F5F5;
		border-radius: 32rpx;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
	}
	.speak text{
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		background: #5c57c4;
		color: #fff;
	}
	.speakImg {
		width: 22rpx;
		height: 22rpx;
		margin-right: 21rpx;
	}

	.speakAll {
		width: 100%;
		max-height: 40vh;
		padding-bottom: 15rpx;
		/* margin-bottom: 98rpx; */
	}

	.speakBody {
		width: 100%;
		display: flex;
		margin-top: 32rpx;
	}

	.speakUserImg {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		margin-right: 16rpx;
	}

	.speakName {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.speakContent {
		color: #262626;
		font-size: 28rpx;
		line-height: 42rpx;
		margin-top: 12rpx;
		word-break: break-all;
	}

	.speakInfo {
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.speakInfoText {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.speakInfoTexts {
		margin-left: 32rpx;
		color: #595959;
		font-size: 24rpx;
	}

	.imgWrap {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.img {
		width: 30rpx;
		height: 30rpx;
	}

	.imgText {
		font-size: 24rpx;
		color: #8C8C8C;
		margin-left: 5rpx;
	}

	.toggleWrap {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		margin-bottom: 20rpx;
	}

	.leftLine {
		width: 48rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #E5E5E5;
	}

	.toggleText {
		color: #595959;
		font-size: 24rpx;
		margin-left: 18rpx;
		margin-right: 10rpx;
	}

	.moreImg {
		width: 30rpx;
		height: 30rpx;
	}

	.moreImgs {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(-90deg);
	}

	.closeWrap {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}
</style>